<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace  ="/public/head :: head"></head>

<style>
    .box{
        margin: 20px 0 0 0;
        width: 100%;
        height:460px;
        background-image: url("/static/tzss-img/login/logo.jpg");
        background-size:100% 100%;
        background-repeat: no-repeat;
    }
    .box .mark-title{
        font-size: 40px;
        color: white;
        padding: 50px 0 0 50px;
        float: left;
        letter-spacing:5px
    }
    .login-box{
        border: 1px solid #ccc;
        border-radius: 2px;
        width:500px;
        height: 350px;
        float: right;
        margin-right: 60px;
        margin-top: 50px;
        background-color: white;
        opacity: 0.6;
        padding: 20px;
        box-sizing: border-box;
        font-size: 20px;
    }
    label{
        margin: 20px;
    }
    form{
        margin: 20px;
    }
    form .input{
        margin-top: 10px;
        height: 60px;
        line-height: 60px;
        border: 1px solid #ccc;
    }
    form .input .icon{
        display: inline-block;
        width: 10%;
        font-weight: 700;
        text-align: center;
    }
    form .input input{
        width: 89%;
        height: 56px;
        line-height: 56px;
        border: none;
        background: none;
    }
    form .op{
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        height: 50px;
        line-height: 50px;
        align-items: center;
    }
    form .op a{
        color: #576b95;
    }
    form .op div{
        display: flex;
        align-items: center;
    }

    form .op div input{
        width: 20px;
        height: 20px;
    }
    form button{
        width:150px;
    }
    body{
        background-color: #fff;
    }
    .bottom-img{
        margin: 20px 0;
        width: 100%;
    }
    .btm-right{
        color:#999;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: white;
        font-size: 25px;
        background-color: gray;
    }
</style>
<body>

<nav th:replace="/public/head::nav"></nav>

<div class="box" id="app">
   <div class="mark-title">
       <p>让代码成为艺术</p>
       <br/>
       <p>用程序丰富生活</p>
   </div>
    <div class="login-box">
        <label>登录</label>

        <form>
            <div class="input">
                <span class="layui-icon icon">&#xe66f;</span><input type="text" name="username" placeholder="账号"/>
            </div>
            <div class="input">
                <span class="layui-icon icon">&#xe673;</span><input type="password" name="password" placeholder="密码"/>
            </div>

            <div class="op">
                <div>
                    <input type="checkbox" name="rememberMe"/><span>记住密码</span>
                </div>
                <!--<a href="">忘记密码</a>-->
                <div  class="layui-btn  layui-btn-warm"  @click="formSubmit">登录</div>
            </div>
        </form>
    </div>
</div>



<script>
    const vm =   new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
        methods: {
            formSubmit(){
                let that = this;
                $.ajax({
                    url:"/user_login",
                    type:'POST',
                    data:$("form").serialize(),
                    success:function(data){
                        console.log("登录成功返回信息:",data);
                        //客户返回的是客户id_用于选择管理项目
                        if(/^[1-9]+$/.test(data)){
                            console.log("客户选择需要管理的项目...");

                            //设置可选择项目
                            setSelectedProject(data);

                        }else  if(data == 0){
                            window.location.href = "/index"
                        }else{
                            that.$notify.error({
                                title: '错误',
                                message: data.message
                            });
                        }

                        return false;
                    }
                })
                return false;
            }
        }
    })
</script>
<!--项目选择 静态框-->
<div th:replace  ="/public/tool :: project_select_modal"></div>
<img class="bottom-img" src="/static/tzss-img/login/bottom.jpg"/>

<div class="btm-right">copyright © 2018-2024 contact 15520449931 </div>
</body>
</html>